<template>
  <div class="chapter">

    <div v-for="(chapter,index) in list" :key="index" class="chapter-item">
      <h2 class="chapter-title">
        {{ chapter.name }}
      </h2>
      <p class="chapter-desc">
        {{ chapter.desc }}
      </p>
      <ul>
        <li v-for="(period, index) in chapter.period" :key="index" class="term-item" @click="periodClick(period)">
          <p>
            <span class="iconfont play" v-if="period.video === 1">&#xe615;</span>
            <span class="iconfont play" v-if="period.doc === 1">&#58882;</span>

            <span>{{ period.periodName }}</span>
            <span class="right">

              <span class="doing" style="margin-right: 10px"
                    v-if="period.periodId === studyRecord.periodId">
                最近学习
                <i class="iconfont">&#xe601;</i>
              </span>

              <i class="iconfont complete chapter-right-icon"
                 v-if="periodList.indexOf(period.periodId) < periodIndex && userId !== ''">&#xe60f;</i>

              <i class="iconfont chapter-right-icon"
                 v-if="periodList.indexOf(period.periodId) > periodIndex && userId !== ''">&#xe6e8;</i>

              <i class="iconfont chapter-right-icon"
                 v-if="userId === ''">&#xe6e8;</i>

              <el-tag v-if="period.free === 1" >免费试看</el-tag>
              <el-tag v-if="period.free === 0" type="danger">收费视频</el-tag>

            </span>
          </p>
          <p>
            <span v-if="period.doc === 1" style="width: 663px">文档名：{{ period.docName }}</span>
          </p>
        </li>
      </ul>
    </div>
    <p class="complete-info">
      <i class="iconfont">&#xe786;</i>
      本课程已完结
    </p>
  </div>
</template>
<script>
import { isBuyCourse } from '@/api/order';
import { mapGetters } from 'vuex';
import { addStudy,getStudy } from '@/api/study';
import { getCourseIsFree } from '@/api/course';

export default {
  inject: ['reload'],
  props: {
    list: {
      type: [Array],
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      userPeriod:{
        userId: '',
        periodId: ''
      },
      courseIsFree: '',
      periodList:[],
      studyRecord: '',
      periodIndex: '',
      studyPeriodId: '' // 最新学习记录
    }
  },
  methods: {
    periodClick(period){

      // 判断是否登录
      // 无登录
      if (this.userId === ''){
        this.$message.error("请先登录系统！")
        return;
      }

      // 已登录，判断课程是否为免费课程
      // 收费课程的免费课时
      if (period.free === 1 && this.courseIsFree === false){
        this.authSuccess(period)
      }

      //免费课程
      if (period.free === 1 && this.courseIsFree === true){
        this.userPeriod.userId = this.userId
        this.userPeriod.periodId = period.periodId
        isBuyCourse(this.userPeriod).then(result => {
          let { code, data } = result
          if (code === 20000) {
            //已购买
            if (data.item === 1){
              this.authSuccess(period)
            }
            else {
              this.$message.error("该课程为免费课程，请点击右方立即学习即可进行学习")
              return;
            }
          }
        })
      }

      // 收费课时，判断是否已购买
      if (period.free !== 1){
        this.userPeriod.userId = this.userId
        this.userPeriod.periodId = period.periodId

        isBuyCourse(this.userPeriod).then(result => {
          let { code, data } = result
          if (code === 20000) {
            //已购买
            if (data.item === 1){
              this.authSuccess(period)
            }
            else {
              this.$message({
                type: 'error',
                message: '请先购买该课程！'
              });
              return;
            }
          }
        })
      }
    },

    authSuccess(period){
      //记录学习进度
      this.newPeriodStudy(period.periodId)

      //如果为文档，则跳转下载
      if (period.doc === 1){
        window.location.href = period.docUrl
      }
      //如果为视频，则跳转至播放
      if (period.video === 1){
        let url = this.$router.resolve({
          path: '/player',
          query: {videoId: period.videoId}
        });
        window.open(url.href, '_blank')
      }
    },

    // 记录最新学习记录
    newPeriodStudy(periodId){
      this.userPeriod.userId = this.userId
      this.userPeriod.periodId = periodId
      addStudy(this.$qs.stringify(this.userPeriod)).then(result => {
        //刷新页面
        this.reload()
      })
    },

    //判断课程是否收费
    CourseIsFree(chapterId){
      getCourseIsFree(chapterId).then(result => {
        let {code,data} = result
        if(code === 20000){
          this.courseIsFree = data.item
        }
      })
    },

    // 获取学习记录
    getStudyRecord(){
      let data = {"userId":this.userId,"courseId":this.list[0].period[0].courseId}
      getStudy(data).then(result => {
        let { code, data } = result
        if (code === 20000) {
          this.studyRecord = data.item
          this.periodIndex = this.periodList.indexOf(this.studyRecord.periodId)
        }
      })
    },
  },

  created () {
    if (this.list.length > 0){
      this.CourseIsFree(this.list[0].chapterId)

      //遍历获取课时编号列表
      this.list.forEach(item => {
        item.period.forEach(period => {
          this.periodList.push(period.periodId)
        })
      })

      if (this.list[0].period.length > 0){
        if (this.userId === ''){
          return;
        }
        else {
          this.getStudyRecord()
        }
      }

    }
  },

  computed: {
    ...mapGetters({
      'userId': 'id',
    }),
  },

}
</script>

<style lang="stylus" scoped>
  .chapter
    & > div
      margin-bottom: 16px;
      padding: 24px 32px 32px;
      background-color: #fff;
      box-shadow: 0 8px 16px rgba(7,17,27,0.1);
      border-radius: 12px;
      color: #1c1f21;
      font-size: 14px;
      &.chapter-introduce
        line-height: 28px;
      &.chapter-item
        .chapter-title
          font-size: 16px;
          line-height: 24px;
          font-weight: 700;
        .chapter-desc
          margin-top: 2px;
          margin-bottom: 16px;
          font-size: 12px;
          color: #545c63;
        .term-item
          width: 100%;
          padding-left: 12px;
          line-height: 48px;
          cursor: pointer;
          & > p
            display: flex;
            align-items: center;
            & > span
              &:nth-child(2)
                flex: 1;
          &:hover
            background-color: rgba(242,13,13,.05);
            border-radius: 4px;
            color: #f20d0d;
            .play
              color: #f20d0d;
            .right
              & > i
                color: #f20d0d!important;
          .play
            margin-right: 8px;
            font-size: 24px;
            color: #9199a1;
          .right
            margin-right:15px;
            font-size: 16px;
            color: #d9dde1;
            .complete, .doing
              color: #00b43c;
              font-size: 12px;
            .doing
              i
                margin-left: 10px;
                font-size: 12px;
    .complete-info
      margin-bottom: 16px;
      padding: 12px 0 12px 32px;
      font-size: 16px;
      color: #93999f;
      line-height: 24px;
      .iconfont
        display: inline-block;
        vertical-align: middle;
        margin-right: 12px;
        font-size: 24px;
  .chapter-right-icon
    margin-right: 10px;
    font-size: 12px;
</style>
